<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2022-01-06 15:01:34
-->
<template>
  <div>
    <h2 class="title">右侧第一个</h2>
    {{ed}}
    <ul class="list">
      <li v-for="d in devices" :key="d.type">
        <span>{{d.type}}</span>
        <span>{{d.value}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
// 获取请求工具 
import {get} from '../../../utils/request'
import {mapState} from 'vuex'
export default {
  // 监听器
  watch:{
    ed:{
      handler(ed){
        this.loadData()
      },
      deep:true
    }
  },
  // 计算属性
  computed: {
    ...mapState(['ed'])
  },
  // 生命周期钩子，表示当页面渲染完毕的时候执行
  mounted(){
    this.loadData()
  },
  // 数据，必须返回一个对象，在这个对象中定义页面中需要用到的变量
  data(){
    return {
      // 声明一个变量，初始值为空数组
      devices:[]
    }
  },
  // 方法，这些方法可以在生命周期中调用，或者可以被事件触发
  methods:{
    // 加载数据 - 与后台交互获取设备数据
    loadData(){
      alert('加载');
      let url = "/dashboard/queryDeviceOnlineNumber"
      get(url).then(resp => {
        // resp表示后台给我们的反馈结果
        this.devices = resp.data;
      })
    }
  }
}
</script>
<style scoped>
.title {
  color:#ccc
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.list > li{
  line-height: 2em;
  border-bottom: 1px solid #f4f4f4;
}
</style>
